<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>增加时段护理充值卡</title>
<meta name="decorator" content="default" />
<style type="text/css">
</style>

</head>
<body>
	<div data-role="navbar">
		<ul>
			<li><a href="${ctx}/cash/oldcard/cards/add/cardTimesPage">增加计次护理卡</a></li>
			<li><a href="${ctx}/cash/oldcard/cards/add/cardDurationPage"
				class="ui-btn-active">增加时段护理卡</a></li>
			<li><a href="${ctx}/cash/oldcard/cards/add/cardProductPage">增加产品充值卡</a></li>
			<li><a href="${ctx}/cash/oldcard/cards/add/cardAllPage">增加综合充值卡</a></li>
		</ul>
	</div>

	<div data-role="content" class="container form-input">
		<tags:message content="${message}" />
	<div class="icon-buttons">
			<input type="button" data-inline="true" data-icon="back"
				onclick="return directOpenURL('${ctx}/cash/member/detail?id=${member.customer.id}')"
				data-iconpos="notext" value="返回" />
		</div>
		<c:if test="${not empty member.newCards.durationCards}">
			<h3 style="text-align: center">增加卡列表</h3>
			<table id="contentTableNewCardDuration"  data-role="table" class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th colspan="8" style="text-align:center;">时段护理卡</th>
					</tr>
					<tr>
						<th>卡名</th>
						<th>护理项目</th>
						<th>护理间隔</th>
						<th>护理时段</th>
						<th>零售价</th>
						<th>店面优惠价</th>
					    <th>服务专员</th>
					    <th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${member.newCards.durationCards}" var="cart">
						<tr id="${cart.id}">
							<td id="name">${cart.card.template.name}</td>

							<c:if test="${cart.card.template.storeCare.care_type==0}">
								<td>${cart.card.template.storeCare.care.name}</td>
								<td>${cart.card.template.storeCare.care.duration}</td>
							</c:if>
							<c:if test="${cart.card.template.storeCare.care_type==1}">
								<td>${cart.card.template.storeCare.storeSelfCare.name}</td>
								<td>${cart.card.template.storeCare.storeSelfCare.duration}</td>
							</c:if>
							<td>${cart.card.lastRechargeDuration}</td>
							<td>${cart.card.template.retail_price}</td>
							<td>${cart.real_cost}</td>
							<td>${cart.employee.name}</td>
							<td><a data-role="button" data-inline="true"
								data-icon="delete" data-iconpos="notext"
								onclick="deleteTarget('确定要删除：${cart.card.template.name}, 删除后基于该卡的所以数据将被清除，确定继续?','${ctx}/cash/oldcard/cards/add/cardDurationDelete?id=${member.customer.id}&cardID=${cart.id}')">删除</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<hr />
		</c:if>
		
		<h3 style="text-align: center">卡模板列表</h3>
		<h4>
			您选择了卡【<span id="templateName"></span>】
		</h4>
		<table id="contentTableCardDuration"  data-role="table" class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th colspan="6" style="text-align:center;">时段护理卡</th>
				</tr>
				<tr>
					<th>卡名</th>
					<th>护理项目</th>
					<th>护理间隔</th>
					<th>护理时段</th>
					<th>零售价</th>
					<th>店面优惠价</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach
					items="${member.newCards.templates.durationCardTemplates}"
					var="duration">
					<tr id="${duration.id}"  cardName="${duration.name}">
						<td>${duration.name}</td>
						<c:if test="${duration.storeCare.care_type==0}">
							<td>${duration.storeCare.care.name}</td>
							<td>${duration.storeCare.care.duration}</td>
						</c:if>
						<c:if test="${duration.storeCare.care_type==1}">
							<td>${duration.storeCare.storeSelfCare.name}</td>
							<td>${duration.storeCare.storeSelfCare.duration}</td>
						</c:if>
						<td>${duration.duration}</td>
						<td>${duration.retail_price}</td>
						<td>${duration.real_cost}</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
	var cardDurationID;
	var cardDurationName;
	$(document).ready(function() {
		registerSelectListener("contentTableCardDuration");
		disableExitMenu();
	});
	function registerSelectListener(target) {
		var trs = "#" + target + " tbody tr";
		$(trs)
				.click(
						function() {
							//-----operation
							var item = $("#opreation-" + this.id);
							if (item.length > 0) {
								item.remove();
								return;
							}
							$(".opreation").remove();
							var html = '<tr id="opreation-' + this.id + '" class="opreation"><td colspan="6">';
							html += '<button onclick="openCardDuration()" data-inline="true">开卡</button>';
							html += "</td></tr>";

							$(this).after(html);
							$("#contentTableCardDuration").trigger('create');

							//-------------
							$("#" + target + " tbody tr").removeClass(
									"select_active");
							$(this).addClass("select_active");
							if ('contentTableCardDuration' == target) {
								cardDurationID = $(this).attr("id");
								cardDurationName = $(this).attr("cardName");
								$("#templateName").text(cardDurationName);
							}
						});

		var currentId = '${cardTimesID}';
		if (currentId == '') {
			$("#" + target + " tbody tr:first-child").click();
		} else {
			$("#" + currentId).click();
		}
	}

	function openCardDuration() {
		if (cardDurationID == null || cardDurationName == null) {
			global.confirm("请先选择卡模板", function() {
			});
			return false;
		}
		var content = "您选择了时段护理卡【" + cardDurationName + "】, 确认添加该老会员卡？";
		// 自定义按钮
		global
				.confirm(
						content,
						function() {
							var url = "${ctx}/cash/oldcard/cards/add/cardDurationForm?id=${member.customer.id}&cardID="
									+ cardDurationID;
							window.location.href = url;
						});
	}

	function page(n, s) {
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").submit();
		return false;
	}
</script>
</body>
</html>
